<template>
	<view>
		<view class="list-item">
			<view class="left">
				<image :src="item.image" mode="widthFix"></image>
			</view>
			<view class="right">
				<view class="title">{{item.title}}</view>
				<view class="word">{{item.word}}</view>
				<view class="btm">
					<text class="price">单价： {{item.price}}</text>
					<text class="sell">销售： {{item.sell | sell}}</text>
				</view>
			</view>
		</view>
		<navigator :url="`/pages/addMessage/addMessage?uid=` + id">
			<button type="primary">添加评论</button>
		</navigator>

		<uni-list-chat v-for="(item, index) in messageList" :key="index" :avatar-circle="true" :title="item.nickname"
			:avatar="item.avator" :note="item.content" :time="item.datetime"></uni-list-chat>

		<view class="goods-cart-placeholder">
			<view class="goods-carts">
				<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
					@buttonClick="buttonClick" />
			</view>
		</view>

		<uni-popup ref="pop">
			<uni-card title="商品选择" extra="SKU">
				<view class="flex">
					<text>数量：</text>
					<uni-number-box v-model="count"></uni-number-box>
				</view>
				<button type="primary" size="mini" @click="handleClick">确定</button>
				<button type="warn" size="mini" @click="handleClickCancel">取消</button>
			</uni-card>
		</uni-popup>
	</view>
</template>

<script>
	import {
		request
	} from '../../utils';
	import {
		mapMutations,
		mapGetters
	} from 'vuex'
	export default {
		watch: {
			totalCount: {
				handler(newValue) {
					this.options[2].info = newValue
				},
				immediate: true
			}
		},
		computed: {
			...mapGetters('car', ['totalCount'])
		},
		filters: {
			sell(count) {
				if (count > 10000) return Math.floor((count / 10000)) + '万+'
				if (count > 1000) return Math.floor((count / 1000)) + '千+'
				return count
			}
		},
		methods: {
			...mapMutations('car', ['addCarList']),
			async getDetail() {
				const resp = await request({
					url: 'http://localhost:3000/list/' + this.id,
				});
				this.item = resp.data
			},
			onClick(e) {
				if (e.index === 2) {
					// 去 购物页面
					uni.switchTab({
						url: '/pages/car/car'
					});
				}
			},
			buttonClick(e) {
				if (e.index === 0) {
					// 加入购物车
					this.$refs.pop.open('bottom')
					this.count = 1
				}
			},
			handleClick() {
				this.$refs.pop.close();

				this.addCarList({
					...this.item,
					count: this.count,
					state: false
				})
			},
			handleClickCancel() {
				this.$refs.pop.close();
			},
			async getMessageList() {
				const resp = await request({
					url: 'http://localhost:3000/messageList',
					data: {
						uid: this.id,
						_sort: 'datetime',
						_order: 'desc'
					}
				})
				this.messageList = resp.data
			}
		},
		data() {
			return {
				id: '',
				item: {},
				messageList: [],
				count: 1,
				options: [{
					icon: 'chat',
					text: '客服'
				}, {
					icon: 'shop',
					text: '店铺',
					infoBackgroundColor: '#007aff',
					infoColor: "#f5f5f5"
				}, {
					icon: 'cart',
					text: '购物车',
					info: ''
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
						color: '#fff'
					}
				],
				customButtonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #1E83FF, #0053B8)',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #60F3FF, #088FEB)',
						color: '#fff'
					}
				],
				customButtonGroup1: [{
					text: '立即购买',
					backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
					color: '#fff'
				}]
			};
		},
		onLoad({
			id
		}) {
			this.id = id;
			this.getDetail();
			this.getMessageList();
		},
		onShow() {
			this.getDetail();
			this.getMessageList();
		}
	}
</script>

<style lang="scss" scoped>
	.list-item {
		image {
			width: 100%;
		}

		.btm {
			display: flex;
			justify-content: space-between;
		}

	}

	.goods-cart-placeholder {
		height: 100upx;

		.goods-carts {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			position: fixed;
			left: 0;
			right: 0;
			/* #ifdef H5 */
			left: var(--window-left);
			right: var(--window-right);
			/* #endif */
			bottom: 0;
		}
	}



	.flex {
		display: flex;
		margin: 10upx 0;
		align-items: center;
	}
</style>